<template>
  <div class="xiaobawang-container">
    <div class="iframe-wrapper">
      <!-- 加载状态显示 -->
      <div v-if="loading" class="loading-container">
        <a-spin tip="游戏机加载中..." size="large" />
      </div>
      <iframe
        ref="gameFrame"
        class="game-iframe"
        src="https://xiaobawangpc.pages.dev/"
        frameborder="0"
        allowfullscreen
        sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
        @load="handleIframeLoaded"
        :style="{ opacity: loading ? 0 : 1 }"
      ></iframe>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import './index.css' // 引入独立的CSS文件

const gameFrame = ref(null)
// 控制加载状态的响应式变量
const loading = ref(true)

// iframe加载完成的处理函数
const handleIframeLoaded = () => {
  // 设置短暂延迟，确保iframe内容完全渲染
  setTimeout(() => {
    loading.value = false
  }, 300)
}

onMounted(() => {
  // 可以在这里添加iframe加载完成后的逻辑
  console.log('小霸王游戏机iframe已加载')
})
</script>
